<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>登录系统</title>
	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" />
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="../css/ie.css" type="text/css" media="screen" />
	<script src="../js/html5.js"></script>
	<![endif]-->
	<script src="../js/jquery-1.5.2.min.js" type="text/javascript"></script>
	<script src="../js/hideshow.js" type="text/javascript"></script>
	<script src="../js/jquery.tablesorter.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../js/jquery.equalHeight.js"></script>
	<script type="text/javascript">
	$(document).ready(function() 
    	{ 
      	  $(".tablesorter").tablesorter(); 
   	 } 
	);
	$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
    </script>
    <script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>
<script type="text/javascript">
setInterval(function() {
    var now = (new Date()).toLocaleString();
    $('.current-time').text(now);
}, 1000);
</script>

</head>


<body>

	<header id="header">
		<hgroup>
			<h1 class="site_title"><a href="index.html">人力资源管理系统</a></h1>
			<!-- <h2 class="section_title"></h2><div class="btn_view_site"><a href="index.php"></a></div> -->
		</hgroup>
	</header> <!-- end of header bar -->
	
	<section id="secondary_bar">
		<div class="user">
			<p>请在右侧登录</p>
		</div>
		<div class="breadcrumbs_container">
		
			<article class="breadcrumbs"><a href="admin.php?controller=admin">系统管理中心</a> <div class="breadcrumb_divider"></div> <a class="current">登录</a></article>
			<div class="current-time"></div>
		</div>
		  
                  
 		
	</section><!-- end of secondary bar -->
	
	<aside id="sidebar" class="column">
		<h3>登录系统</h3>
		<ul class="toggle">
			<li class="icn_security"><a href="#">登录系统</a></li>
		</ul>
	</aside><!-- end of sidebar -->
	
	<section id="main" class="column">
		
		<h4 class="alert_info" style="width:46%">请使用您的用户名和密码在下面登录.</h4>
		
		<div class="article_set">

			<article class="module width_half" >
			<header><h3>管理员登录</h3></header>
				<div class="module_content" >
						<fieldset>
							<label>用户名</label>
							<input type="text" id="userName"  style="width:92%;">
						</fieldset>
						<fieldset>
							<label>密码</label>
							<input type="password" id="userPsw" style="width:92%;">
						</fieldset>
						<div class="clear"></div>
				</div>
			<footer>

				<body onkeydown="KeyLogin();">

				<div class="submit_link">
					<input type="submit" id="submit" value="开始登录" class="alt_btn" >
				</div>

				</body>

			</footer>
		</article>
			
		</div>
		<div class="spacer"></div>
	</section>
	<script type="text/javascript">
	    let submit = document.getElementById("submit"),
	        reset = document.getElementById("reset");
	    submit.onclick = function() {
	        let request;
	        if (window.XMLHttpRequest) {
	            request = new XMLHttpRequest();
	        } else {
	            request = new ActiveXObject("Microsoft.XMLHTTP");
	        }
	        
	        request.open("POST", "http://localhost:8080/javaWeb/login.action");
	        let data = "id=" + document.getElementById("userName").value +
	            "&password=" + document.getElementById("userPsw").value;
	        console.log(data);
	        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	        request.send(data);
	        //监听事件
	        request.onreadystatechange = function() {
	            if (request.readyState === 4) {
	                if (request.status === 200) {
	                    console.log(request.responseText);
//	                    alert(request.responseText);
	                    var jsonData=JSON.parse(request.responseText);



	                    if(jsonData.status == "1002"){
	                        console.log("登录成功");
	                        // console.log(data);
	                        localStorage.setItem("username",jsonData.username);
	                        localStorage.setItem("operator_num",document.getElementById("userName").value);
	                        location.href = "index.html";
	                    }else if(jsonData.status == "1001"){
	                        alert("用户名或者密码错误");
	                        return;
	                    }
	                } else {
	                    alert("error:" + request.status);
	                }
	            }
	        };
	    };
	    reset.onclick = function(){
	        document.getElementById("userName").value = "";
	        document.getElementById("userPsw").value = "";
	    }

	    function KeyLogin() {

	        if(event.keyCode == 13){
	            submit.click();
			}
			
        }

    </script>

</body>

</html>